<template>
    <el-row>
        <el-col :span="16">
            <h3 style="text-align: left; margin: 35px 0 25px 10px;"><el-icon>
                    <Files />
                </el-icon> 全部收藏
                <el-button type="primary" text>
                    <el-icon>
                        <Refresh />
                    </el-icon> 刷新
                </el-button>
                <el-button type="primary" round plain v-show="data.showbtns">
                    <el-icon>
                        <Star />
                    </el-icon> 取消收藏
                </el-button>
            </h3>
        </el-col>
        <el-col :span="7">
            <el-input v-model="searchFiles" size="normal" class="w-50 m-2" placeholder="输入文件名搜索……" suffix-icon="Search" />
        </el-col>
    </el-row>
    <div>
        <el-table :data="filterTableData" row-key="id" style="width: 100%" lazy :load="load"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30" />
            <el-table-column label="" width="25">
                <template #default="scope"></template>
            </el-table-column>
            <el-table-column label="文件名">
                <template #default="scope">
                    <el-link :underline="false">
                        <div style="display: flex; align-items: center">
                            <img src="../../assets/images/folder.png" v-if="scope.row.filetype == '文件夹'" />
                            <img src="../../assets/images/txt.png" v-else-if="scope.row.filetype == 'txt文本文件'" />
                            <img src="../../assets/images/unknown.png" v-else />
                        </div>&nbsp;&nbsp;{{ scope.row.filename }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="modifytime" label="修改时间" sortable />
            <el-table-column prop="filesize" label="大小(KB)" />
            <el-table-column prop="filetype" label="类型" sortable />
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link"><el-icon class="el-icon--right"><el-icon>
                                    <More />
                                </el-icon></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>
                                    <el-button text>
                                        <strong><el-icon>
                                                <Edit />
                                            </el-icon> 查看</strong>
                                    </el-button>
                                </el-dropdown-item>
                                <el-dropdown-item key="1" v-if="scope.row.islike">
                                    <el-button text @click="handleCancelLike(scope.$index, scope.row)">
                                        <el-icon>
                                            <StarFilled />
                                        </el-icon> 取消收藏
                                    </el-button>
                                </el-dropdown-item>
                                <el-dropdown-item :key="0" v-else-if="!scope.row.islike">
                                    <el-button text @click="handleLike(scope.$index, scope.row)">
                                        <el-icon>
                                            <Star />
                                        </el-icon> 收藏
                                    </el-button>
                                </el-dropdown-item>

                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <!-- <el-button text @click="handleEdit(scope.$index, scope.row)">
                        <strong><el-icon>
                                <Edit />
                            </el-icon> 查看</strong>
                    </el-button>
                    <el-button text @click="handleRename(scope.$index, scope.row)">
                        <strong>
                            <el-icon>
                                <EditPen />
                            </el-icon> 重命名
                        </strong>
                    </el-button>
                    <el-button type="danger" text plain @click.stop="open">
                        <strong>
                            <el-icon>
                                <DeleteFilled />
                            </el-icon> 删除</strong>
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import { computed, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// const form = reactive({
//     name: '',
//     region: '',
//     date1: '',
//     date2: '',
//     delivery: false,
//     type: [],
//     resource: '',
//     desc: '',
// })
const data = reactive({
    showbtns: false
})

const searchFiles = ref('')
const filterTableData = computed(() =>
    tableData1.filter(
        (data) =>
            !searchFiles.value ||
            data.filename.includes(searchFiles.value) ||
            data.islike.valueOf()
    )
    // TODO: 文件夹内的文件进行筛选
)


interface FileData {
    id: number
    filename: string
    modifytime: string
    filesize: number | string
    filetype: string
    islike: boolean
    hasChildren?: boolean
    children?: FileData[]
}

const handleEdit = (index, row) => {
    console.log(index, row);
}
const handleDelete = (index, row) => {
    console.log(index, row);
}
const handleRename = (index, row) => {
    console.log(index, row);
}
const handleCancelLike = (index, row) => {
    tableData1[index].islike = false;
    row.islike = false;
    console.log(index, row);
}
const handleLike = (index, row) => {
    tableData1[index].islike = true;
    row.islike = true
    console.log(index, row);
}
const selected = (index, row) => {
    console.log(index, row);
}
const uploadRename = function () {
    console.log("uploadRename the filetable");
}
const handleSelectionChange = (selection) => {
    if (selection.length != 0) {
        data.showbtns = true
    } else {
        data.showbtns = false
    }
}

const load = (
    row: FileData,
    treeNode: unknown,
    resolve: (date: FileData[]) => void
) => {
    setTimeout(() => {
        resolve([

            {
                id: 32,
                filename: 'ts_百稿审102.txt',
                modifytime: '2023.12.09 16:00',
                filesize: 2022,
                islike: true,
                filetype: 'txt文本文件'
            },
        ])
    }, 1000)
}

// const load = (
//     row: FileData,
//     treeNode: unknown,
//     resolve: (date: FileData[]) => void
// ) => {
//     setTimeout(() => {
//         resolve([
//             {
//                 id: 31,
//                 filename: 'ts_百稿审100.txt',
//                 modifytime: '2023.12.10 16:58',
//                 filesize: 999,
//                 filetype: 'txt文本文件',
//                 islike: true,
//                 hasChildren: false,
//             }, {
//                 id: 32,
//                 filename: 'ts_百稿审102.txt',
//                 modifytime: '2023.12.09 16:00',
//                 filesize: 2022,
//                 islike: true,
//                 hasChildren: false,
//                 filetype: 'txt文本文件'
//             },
//         ])
//     }, 1000)
// }

const tableData1: FileData[] = [
    {
        id: 1,
        filename: '典型稿件',
        modifytime: '2023.12.13 16:00',
        filesize: '--',
        islike: true,
        hasChildren: true,
        filetype: '文件夹'
    },
    {
        id: 2,
        filename: 'ts_案例稿件001.txt',
        modifytime: '2023.12.09 16:00',
        filesize: 2022,
        islike: true,
        hasChildren: false,
        filetype: 'txt文本文件'
    },

    {
        id: 4,
        filename: 'ts_案例稿件.txt',
        modifytime: '2023.12.13 16:00',
        filesize: 2023,
        islike: true,
        hasChildren: false,
        filetype: 'txt文本文件'
    }
]
// console.log(tableData1)
</script>
  

<style scoped>
.cell .el-button {
    width: auto;
    margin: 0 10px 0 0;
    padding: 0;
}

.file_controler el-col {
    align-content: left;

}

.el-col .el-input {
    margin: 35px 0px 25px 10px;
}
</style>
<style>
.el-message-box__btns {
    flex-wrap: nowrap !important;
}
</style>